<template>
  <div class="DevicePopUp">
    <div class="content">
      <div class="content__border">
        <ul class="content__border__data">
          <li class="content__border__data__row">
            <i class="content__border__data__row__img"></i>
            <p class="content__border__data__row__name">设备名称:</p>
            <b class="content__border__data__row__value">{{ deviceData.name }}</b>
          </li>
          <li class="content__border__data__row">
            <p class="content__border__data__row__name">监测点号：</p>
            <b class="content__border__data__row__value">{{ deviceData.number }}</b>
          </li>
          <li class="content__border__data__row">
            <p class="content__border__data__row__name" >应力值：</p>
            <b class="content__border__data__row__value" style="color:rgba(102, 212, 208, 1);">{{ deviceData.stress }}</b>
          </li>
          <li class="content__border__data__row">
            <p class="content__border__data__row__name">设备状态：</p>
            <b class="content__border__data__row__value" :style="{color:deviceData.status=='离线'?'rgb(212, 131, 30)':'rgb(69, 182, 223)'}">{{ deviceData.status }}</b>
          </li>
          <li class="content__border__data__row">
            <p class="content__border__data__row__name">预警状态：</p>
            <b class="content__border__data__row__value" :style="{color:deviceData.warn=='严重'?'rgb(212, 73, 30)':'rgb(102, 212, 208)'}">{{ deviceData.warn }}</b>
          </li>
          <li class="content__border__data__row">
            <p class="content__border__data__row__name">更新时间：</p>
            <b class="content__border__data__row__value" style="color:rgba(102, 212, 208, 1);">{{ deviceData.time }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "DevicePopUp",
  props: {
    deviceData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  /**所有方法*/
  methods: {},
};
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.DevicePopUp {
  width: 100%;
  height: 100%;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 3.3/2;
  border: 2px solid rgba(44, 173, 255, 1);
  background: linear-gradient(
    90deg,
    rgba(23, 49, 71, 1),
    rgba(57, 131, 193, 0.5)
  );
  &__border {
    width: 95%;
    height: 90%;
    &__data {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      &__row {
        display: flex;
        align-items: center;
        &__img {
          width: 8%;
          aspect-ratio: 1/1;
          background: url("/static/img/slope/deviceSearch.webp") center
            no-repeat;
          background-size: 100%;
        }
        &__name {
          padding-right: 2%;
        }
        &__name,
        &__value {
          font-size: 1rem;
          font-weight: 400;
          color: #ffffff;
          line-height: 16px;
        }
      }
    }
  }
}
</style>
